<template>
    <div class="bg-f2f3f5 min-w-100 leaveSpace">
        <div class="flex gap-20 justify-center max-w-1200 mar-x-auto pad-y-10" style="min-height: calc(100vh - 91px)">
            <div class="manageCenter_left bg-white flex-1 h80 pad-10 border-rad-5">
                <div v-for="(item, index) in adminNavItems"
                    :key="index"
                    :class="'nav-item ' + (item.isSelected ? 'nav-item-active' : 'nav-item-default')"
                    @click="handleClickMenu(item)"
                    :style="{ padding: '0 10px '}"
                >
                    <SvgIcons 
                        :iconClass="item.url"
                        :style="{
                            marginRight: '10px',
                            fontSize: '20px',
                        }"
                    />

                    <span class="w-px-80">{{ item.text }}</span>
                </div>
            </div>

            <div class="flex-5 w-px-100 bg-white border-rad-5 color-252933">
                <ArticleManage v-if="currentMenuId === 1" />
                <PersonalProfile v-else-if="currentMenuId === 2" />
                <AccountSettings v-else-if="currentMenuId === 3" />
                <MessageCenter v-else-if="currentMenuId === 4" />
            </div>
        </div>
    </div>
</template>

<script>
 	import SvgIcons from '@/components/SvgIcons/index'
    import Lines from '@/components/Lines/index'
    import PersonalProfile from '@/components/CenterPersonal/PersonalProfile'
    import AccountSettings from '@/components/CenterPersonal/AccountSettings'
    import ArticleManage from '@/components/CenterPersonal/ArticleManage/ArticleManage'
    import MessageCenter from '@/components/CenterPersonal/MessageCenter'
    import Utils from '@/utils/utils'

    import { mapState } from 'vuex'
    import { checkLogin } from '@/utils/lib'

    export default {
        name: 'ManagementCenter',

        components: {
            SvgIcons,
            Lines,
            PersonalProfile,
            AccountSettings,
            ArticleManage,
            MessageCenter,
        },

        computed: {
            ...mapState({
                currentMenuId: state => state.articleManage.currentMenuId, // 当前菜单id
                adminNavItems: state => state.articleManage.adminNavItems, // 管理员导航项
            }),
        },

        watch: {
            
        },

        data () {
            return {
                
            }
        },

        destroyed () {
            this.$store.commit('articleManage/setCurrentMenuId', null)
        },
        mounted () {
            // 判断是否登录,没有登录则跳转回首页
            if (!checkLogin()) {
                Utils.popUpMsg('warning', '请先登录！', 3000)
                this.$router.push('/')
            }

            // 移动 - 获取抽屉操作类型
            if (this.$route.query.operateType) {
                this.operateType = JSON.parse(this.$route.query.operateType)
                this.$store.commit('articleManage/setCurrentMenuId', this.operateType)
            }
            this.$store.commit('articleManage/setCurrentMenuId', 1)
        },

        methods: {
            // 点击菜单
            handleClickMenu (row) {
                this.adminNavItems.forEach(item => {
                    item.isSelected = false

                    if (item.id === row.id) {
                        item.isSelected = true
                        this.$store.commit('articleManage/setCurrentMenuId', item.id)
                    }
                })
            },
        },
    }
</script>

<style scoped>
    @media screen and (max-width: 750px) {
        .manageCenter_left {
            display: none;
        }

        .leaveSpace {
			padding-left: 0;
			padding-right: 0;
		}
    }

    @media screen and (min-width: 750px) {
		.leaveSpace {
			padding-left: 10px;
			padding-right: 10px;
		}
	}

    .nav-item {
		display: flex;
		align-items: center;
		cursor: pointer;
		height: 50px;
		border-radius: 5px;
		font-size: 16px;
	}

	.nav-item-default {
		transition-property: background-color, color;
		transition-duration: 0.3s;
	}

	.nav-item-default:hover {
		background-color: #f7f8fa;
		color: #1e80ff;
	}

	.nav-item-active {
		background-color: #eaf2ff;
		color: #1e80ff;
	}
</style>